/* Convex Tokens */
:root {
  --cvx-red-100: rgb(252, 215, 203);
  --cvx-red-200: rgb(255, 202, 193);
  --cvx-red-300: rgb(252, 165, 165);
  --cvx-red-400: rgb(253, 76, 65);
  --cvx-red-500: rgb(238, 52, 47);
  --cvx-red-700: rgb(168, 21, 21);
  --cvx-red-900: rgb(107, 33, 31);
  --cvx-purple-100: rgb(241, 200, 233);
  --cvx-purple-200: rgb(232, 180, 220);
  --cvx-purple-500: rgb(141, 38, 118);
  --cvx-purple-700: rgb(86, 0, 83);
  --cvx-purple-900: rgb(113, 36, 96);
  --cvx-blue-100: rgb(204, 222, 250);
  --cvx-blue-200: rgb(177, 202, 240);
  --cvx-blue-500: rgb(7, 78, 232);
  --cvx-blue-700: rgb(33, 34, 181);
  --cvx-blue-900: rgb(0, 43, 153);
  --cvx-cyan-200: rgb(170, 227, 239);
  --cvx-cyan-500: rgb(7, 192, 232);
  --cvx-cyan-700: rgb(0, 155, 221);
  --cvx-cyan-900: rgb(15, 89, 105);
  --cvx-green-100: rgb(203, 237, 182);
  --cvx-green-200: rgb(180, 236, 146);
  --cvx-green-500: rgb(79, 176, 20);
  --cvx-green-700: rgb(34, 137, 9);
  --cvx-green-900: rgb(44, 83, 20);
  --cvx-yellow-50: rgb(254, 252, 232);
  --cvx-yellow-100: rgb(250, 228, 171);
  --cvx-yellow-200: rgb(230, 226, 168);
  --cvx-yellow-500: rgb(243, 176, 28);
  --cvx-yellow-700: rgb(213, 113, 21);
  --cvx-yellow-900: rgb(109, 82, 23);
  --cvx-neutral-1: rgb(222, 226, 234);
  --cvx-neutral-2: rgb(204, 206, 211);
  --cvx-neutral-3: rgb(174, 177, 184);
  --cvx-neutral-4: rgb(151, 154, 164);
  --cvx-neutral-5: rgb(133, 136, 147);
  --cvx-neutral-6: rgb(118, 121, 131);
  --cvx-neutral-7: rgb(103, 106, 116);
  --cvx-neutral-8: rgb(88, 92, 101);
  --cvx-neutral-9: rgb(73, 76, 84);
  --cvx-neutral-10: rgb(57, 60, 66);
  --cvx-neutral-11: rgb(41, 43, 48);
  --cvx-neutral-12: rgb(24, 25, 28);
  --cvx-accent: rgb(63, 82, 149);
  --cvx-info: rgb(7, 191, 232);
  --cvx-util-accent: rgb(38, 135, 246);
  --cvx-util-info: rgb(7, 191, 232);
  --cvx-util-success: rgb(79, 176, 20);
  --cvx-util-danger: rgb(238, 52, 47);
  --cvx-util-warning: rgb(243, 176, 28);
}

/* Convex Tokens Light Theme (from Dashboard) */
:root,
html.light {
  --cvx-background-brand: rgb(249, 247, 238);
  --cvx-background-primary: rgb(243, 240, 237);
  --cvx-background-secondary: rgb(253, 252, 250);
  --cvx-background-tertiary: rgb(240, 238, 235);
  --cvx-background-highlight: rgb(254, 252, 232);
  --cvx-background-success: rgb(203, 237, 182);
  --cvx-background-warning: rgb(250, 228, 171);
  --cvx-background-error: rgb(252, 215, 203);
  --cvx-background-error-secondary: rgb(255, 202, 193);
  --cvx-content-accent: rgb(48, 106, 207);
  --cvx-content-success: rgb(34, 137, 9);
  --cvx-content-warning: rgb(109, 82, 23);
  --cvx-content-error: rgb(168, 21, 21);
  --cvx-content-error-secondary: rgb(238, 52, 47);
  --cvx-content-link: rgb(33, 34, 181);
  --cvx-border-transparent: rgba(33, 34, 30, 0.14);
  --cvx-border-selected: rgb(30, 28, 25);
}

/* Convex Tokens Dark Theme (from Dashboard) */
:root,
html.dark {
  --cvx-background-brand: rgb(30, 28, 26);
  --cvx-background-primary: rgb(30, 28, 26);
  --cvx-background-secondary: rgb(42, 40, 37);
  --cvx-background-tertiary: rgb(60, 58, 65);
  --cvx-background-highlight: rgb(109, 82, 23);
  --cvx-background-success: rgb(44, 83, 20);
  --cvx-background-warning: rgb(109, 82, 23);
  --cvx-background-error: rgb(107, 33, 31);
  --cvx-background-error-secondary: rgb(168, 21, 21);
  --cvx-content-accent: rgb(99, 168, 248);
  --cvx-content-success: rgb(180, 236, 146);
  --cvx-content-warning: rgb(230, 226, 168);
  --cvx-content-error: rgb(255, 202, 193);
  --cvx-content-error-secondary: rgb(253, 76, 65);
  --cvx-content-link: rgb(177, 202, 240);
  --cvx-border-transparent: rgba(163, 156, 148, 0.3);
  --cvx-border-selected: rgb(225, 215, 205);
}

/* Color Tokens */
:root {
  --bolt-elements-bg-depth-1: var(--cvx-background-secondary);
  --bolt-elements-bg-depth-2: var(--cvx-background-primary);

  --bolt-elements-button-primary-background: var(--cvx-accent);
  --bolt-elements-button-primary-backgroundHover: color-mix(in srgb, var(--cvx-accent) 80%, transparent);
  --bolt-elements-button-primary-text: theme('colors.white');

  --bolt-elements-button-secondary-background: var(--cvx-background-secondary);
  --bolt-elements-button-secondary-backgroundHover: var(--cvx-background-tertiary);
  --bolt-elements-button-secondary-text: var(--cvx-content-primary);

  --bolt-elements-button-danger-background: var(--cvx-background-error);
  --bolt-elements-button-danger-backgroundHover: var(--cvx-background-error-secondary);
  --bolt-elements-button-danger-text: var(--cvx-content-error);

  --bolt-elements-loader-background: var(--cvx-neutral-4);
  --bolt-elements-loader-progress: var(--cvx-content-link);

  --bolt-elements-messages-background: var(--cvx-background-primary);
  --bolt-elements-messages-linkColor: var(--cvx-content-link);

  --bolt-elements-artifacts-background: var(--cvx-background-secondary);
  --bolt-elements-artifacts-backgroundHover: var(--cvx-background-primary);
  --bolt-elements-artifacts-borderColor: var(--cvx-border-transparent);
  --bolt-elements-actions-background: var(--cvx-background-secondary);

  --bolt-elements-terminals-buttonBackground: var(--cvx-background-secondary);

  --bolt-elements-sidebar-background: var(--cvx-background-secondary);
  --bolt-elements-sidebar-active-item-background: var(--cvx-background-primary);

  --bolt-elements-preview-addressBar-background: var(--cvx-background-secondary);
  --bolt-elements-preview-addressBar-backgroundHover: var(--cvx-background-secondary);
  --bolt-elements-preview-addressBar-backgroundActive: var(--cvx-background-secondary);
  --bolt-elements-preview-addressBar-text: var(--cvx-content-secondary);
  --bolt-elements-preview-addressBar-textActive: var(--cvx-content-primary);

  --bolt-elements-item-backgroundAccent: var(--cvx-background-tertiary);
  --bolt-elements-item-contentAccent: var(--cvx-content-primary);

  --bolt-elements-actions-code-background: theme('colors.gray.900');
}

/* Color Tokens Light Theme */
:root,
html.light {
  --bolt-elements-bg-depth-3: theme('colors.gray.200');
  --bolt-elements-bg-depth-4: theme('colors.gray.900/0.05');

  --bolt-elements-code-background: theme('colors.gray.100');
  --bolt-elements-code-text: theme('colors.gray.950');
  --bolt-elements-messages-code-background: theme('colors.gray.800');
  --bolt-elements-messages-inlineCode-background: theme('colors.gray.200');
  --bolt-elements-messages-inlineCode-text: theme('colors.gray.800');
  --bolt-elements-artifacts-inlineCode-background: theme('colors.gray.100');
  --bolt-elements-artifacts-inlineCode-text: var(--content-primary);

  --bolt-elements-item-contentDefault: theme('colors.gray.900/0.5');
  --bolt-elements-item-contentActive: theme('colors.gray.950');
  --bolt-elements-item-contentDanger: theme('colors.red.500');
  --bolt-elements-item-backgroundDefault: rgba(0, 0, 0, 0);
  --bolt-elements-item-backgroundActive: theme('colors.gray.900/0.05');
  --bolt-elements-item-backgroundDanger: theme('colors.red.500/0.1');

  --bolt-elements-icon-success: theme('colors.green.500');
  --bolt-elements-icon-error: theme('colors.red.500');
  --bolt-elements-prompt-background: theme('colors.white/0.8');

  --bolt-elements-terminals-background: theme('colors.white');

  /* Terminal Colors */
  --bolt-terminal-background: var(--bolt-elements-terminals-background);
  --bolt-terminal-foreground: #333333;
  --bolt-terminal-selection-background: #00000040;
  --bolt-terminal-black: #000000;
  --bolt-terminal-red: #cd3131;
  --bolt-terminal-green: #00bc00;
  --bolt-terminal-yellow: #949800;
  --bolt-terminal-blue: #0451a5;
  --bolt-terminal-magenta: #bc05bc;
  --bolt-terminal-cyan: #0598bc;
  --bolt-terminal-white: #555555;
  --bolt-terminal-brightBlack: #686868;
  --bolt-terminal-brightRed: #cd3131;
  --bolt-terminal-brightGreen: #00bc00;
  --bolt-terminal-brightYellow: #949800;
  --bolt-terminal-brightBlue: #0451a5;
  --bolt-terminal-brightMagenta: #bc05bc;
  --bolt-terminal-brightCyan: #0598bc;
  --bolt-terminal-brightWhite: #a5a5a5;
}

/* Color Tokens Dark Theme */
:root,
html.dark {
  --bolt-elements-bg-depth-3: theme('colors.gray.800');
  --bolt-elements-bg-depth-4: theme('colors.white/0.05');

  --bolt-elements-code-background: theme('colors.gray.800');
  --bolt-elements-code-text: theme('colors.white');
  --bolt-elements-messages-code-background: theme('colors.gray.900');
  --bolt-elements-messages-inlineCode-background: theme('colors.gray.700');
  --bolt-elements-messages-inlineCode-text: var(--content-primary);
  --bolt-elements-artifacts-inlineCode-background: theme('colors.gray.800');
  --bolt-elements-artifacts-inlineCode-text: theme('colors.white');

  --bolt-elements-item-contentDefault: theme('colors.white/0.5');
  --bolt-elements-item-contentActive: theme('colors.white');
  --bolt-elements-item-contentDanger: theme('colors.red.500');
  --bolt-elements-item-backgroundDefault: rgba(255, 255, 255, 0);
  --bolt-elements-item-backgroundActive: theme('colors.white/0.1');
  --bolt-elements-item-backgroundDanger: theme('colors.red.500/0.1');

  --bolt-elements-icon-success: theme('colors.green.400');
  --bolt-elements-icon-error: theme('colors.red.400');

  --bolt-elements-prompt-background: theme('colors.gray.900/0.8');

  --bolt-elements-terminals-background: var(--bolt-elements-bg-depth-1);

  /* Terminal Colors */
  --bolt-terminal-background: var(--bolt-elements-terminals-background);
  --bolt-terminal-foreground: #eff0eb;
  --bolt-terminal-selection-background: #97979b33;
  --bolt-terminal-black: #000000;
  --bolt-terminal-red: #ff5c57;
  --bolt-terminal-green: #5af78e;
  --bolt-terminal-yellow: #f3f99d;
  --bolt-terminal-blue: #57c7ff;
  --bolt-terminal-magenta: #ff6ac1;
  --bolt-terminal-cyan: #9aedfe;
  --bolt-terminal-white: #f1f1f0;
  --bolt-terminal-brightBlack: #686868;
  --bolt-terminal-brightRed: #ff5c57;
  --bolt-terminal-brightGreen: #5af78e;
  --bolt-terminal-brightYellow: #f3f99d;
  --bolt-terminal-brightBlue: #57c7ff;
  --bolt-terminal-brightMagenta: #ff6ac1;
  --bolt-terminal-brightCyan: #9aedfe;
  --bolt-terminal-brightWhite: #f1f1f0;
}

/*
 * Element Tokens
 *
 * Hierarchy: Element Token -> (Element Token | Color Tokens) -> Primitives
 */
:root {
  --header-height: 64px;
  --chat-max-width: 37rem;
  --chat-min-width: 640px;
  --workbench-width: min(calc(100% - var(--chat-min-width)), 2536px);
  --workbench-inner-width: calc(var(--workbench-width) - 16px);
  --workbench-left: calc(100% - var(--workbench-width));

  /* Terminal */
  --bolt-elements-terminal-backgroundColor: var(--bolt-terminal-background);
  --bolt-elements-terminal-textColor: var(--bolt-terminal-foreground);
  --bolt-elements-terminal-cursorColor: var(--bolt-terminal-foreground);
  --bolt-elements-terminal-selection-backgroundColor: var(--bolt-terminal-selection-background);
  --bolt-elements-terminal-color-black: var(--bolt-terminal-black);
  --bolt-elements-terminal-color-red: var(--bolt-terminal-red);
  --bolt-elements-terminal-color-green: var(--bolt-terminal-green);
  --bolt-elements-terminal-color-yellow: var(--bolt-terminal-yellow);
  --bolt-elements-terminal-color-blue: var(--bolt-terminal-blue);
  --bolt-elements-terminal-color-magenta: var(--bolt-terminal-magenta);
  --bolt-elements-terminal-color-cyan: var(--bolt-terminal-cyan);
  --bolt-elements-terminal-color-white: var(--bolt-terminal-white);
  --bolt-elements-terminal-color-brightBlack: var(--bolt-terminal-brightBlack);
  --bolt-elements-terminal-color-brightRed: var(--bolt-terminal-brightRed);
  --bolt-elements-terminal-color-brightGreen: var(--bolt-terminal-brightGreen);
  --bolt-elements-terminal-color-brightYellow: var(--bolt-terminal-brightYellow);
  --bolt-elements-terminal-color-brightBlue: var(--bolt-terminal-brightBlue);
  --bolt-elements-terminal-color-brightMagenta: var(--bolt-terminal-brightMagenta);
  --bolt-elements-terminal-color-brightCyan: var(--bolt-terminal-brightCyan);
  --bolt-elements-terminal-color-brightWhite: var(--bolt-terminal-brightWhite);
}
